<template>
	<view class="home-box pageBg">
		<custom-nav-bar title="推荐" />
		<view class="swiper">
			<swiper indicator-dots autoplay indicator-color="rgba(255, 255, 255, .6)" indicator-active-color="#fff" circular>
				<swiper-item v-for="item of homeBannerList" :key="item._id">

					<navigator v-if="item.target != 'self'" :url="item.url" class="like" target="miniProgram"
						:app-id="item.appid">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>

					<navigator v-else :url="`/pages/classlist/classlist?${item.url}`" class="like">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>

				</swiper-item>
			</swiper>
		</view>

		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper autoplay circular vertical interval="2500">
					<swiper-item v-for="item of titleList" :key="item._id">{{ item.title }}</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>

		<view class="recommend">
			<common-title>
				<template #title>每日推荐</template>
				<template #right style="display: flex; align-items: center">
					<uni-icons type="calendar" size="18"></uni-icons>
					<text class="text">{{ new Date().getDate() }}日</text>
				</template>
			</common-title>

			<view class="content">
				<scroll-view scroll-x :show-scrollbar="false">
					<view class="scroll-item" v-for="(item, index) of recommendList" :key="item._id" @click="goPreview(index)">
						<!-- <image mode="aspectFill" v-lazy-load="item.smallPicurl" ></image> -->
						<!-- #ifdef H5 -->
						<image mode="aspectFill" v-lazy-load="item.smallPicurl"></image>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" :src="item.smallPicurl" lazy-load></image>
						<!-- #endif -->
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="theme">
			<common-title>
				<template #title>专题精选</template>
				<template #right>
					<navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
				</template>
			</common-title>

			<view class="content">
				<theme-item :item="item" v-for="item of themeList" :key="item._id"></theme-item>
				<!-- <theme-item v-for="(item, index) of 8"></theme-item> -->
				<theme-item :isMore="false"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShow } from '@dcloudio/uni-app';
import { apiGet } from '@/api/apis.js';
import { usePreviewDataStore } from '@/store/preview_data.js'
import axios from 'axios'

const homeBannerList = ref([]);

const titleList = ref([]);

const recommendList = ref([]);

const themeList = ref([]);

const store = usePreviewDataStore()

onLoad(async () => {
	// 获取轮播图
	homeBannerList.value = (await apiGet('homeBanner')).data;


	// 获取公告标题
	titleList.value = (await apiGet('wallNewsList')).data;

	// 获取每日推荐图片
	recommendList.value = (await apiGet('randomWall')).data;

	// 专题精选图片
	themeList.value = (await apiGet('classify', { pageSize: 8, select: true })).data;


	



});

// 每日推荐预览
const goPreview = (index) => {
	store.updateList(recommendList.value)
	uni.navigateTo({
		url: `/pages/preview/preview?index=${index + 1}`
	});
};

onShow(() => {
	store.deleteList()
})



// 分享给朋友
onShareAppMessage(() => {
	return {
		title: '鸡你太美',
		path: '/pages/index/index'
	}
})


uni.addInterceptor('navigateTo', {
  fail: (err) => {
    if (err.errMsg.includes('页面不存在')) {
      uni.redirectTo({ url: '/pages/404/404' });
    }
  }
});

</script>

<style lang="scss" scoped>
.home-box {
	.swiper {
		width: 750rpx;
		padding: 30rpx 0;

		swiper {
			width: 750rpx;
			height: 340rpx;

			swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				.like {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.notice {
		height: 80rpx;
		width: 690rpx;
		// padding: 0 30rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;

		line-height: 80rpx;
		overflow: hidden;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140rpx;

			:deep() {
				.uni-icons {
					color: $brand-theme-color !important;
				}
			}

			.text {
				color: $brand-theme-color;
				font-weight: 600;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 100%;

				swiper-item {
					height: 100%;
					font-size: 30rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.recommend {
		padding-top: 50rpx;

		:deep() {
			.uni-icons {
				color: $brand-theme-color !important;
			}
		}

		.text {
			color: $brand-theme-color;
			margin-left: 7rpx;
		}

		.content {
			width: 720rpx;

			margin: 30rpx 0 0 30rpx;

			scroll-view {
				// display: flex;

				white-space: nowrap;

				.scroll-item {
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.scroll-item:last-child {
					margin-right: 30rpx;
				}
			}
		}
	}

	.theme {
		padding: 50rpx 0;

		.more {
			font-size: 32rpx;
			color: #888;
		}

		.content {
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15rpx;
		}
	}
}
</style>
